<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>培训中</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../../static/css/font.css" th:href="@{/css/font.css}">
    <link rel="stylesheet" href="../../static/css/xadmin.css" th:href="@{/css/xadmin.css}">
    <script src="../../static/lib/layui/layui.js" charset="utf-8" th:src="@{/lib/layui/layui.js}"></script>
    <script type="text/javascript" src="../../static/js/xadmin.js" th:src="@{/js/xadmin.js}"></script>
    <script src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <style type="text/css">
        #page {
            display: flex;
            justify-content: center;
        }
    </style>
</head>

<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="./index.html">首页</a>
                <a href="">演示</a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card" style="display: flex;">
                <div class="layui-card-body" style="display: inline-block">
                    <ul class="layui-nav layui-nav-tree" lay-filter="test" style="width: auto;" id="batch_list">
                        <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->

                    </ul>
                </div>
                <div style="width: 86%;margin-top: -14px;margin-left: -20px">
<!--                    <div class="layui-card-header">-->
<!--                        <button class="layui-btn" onclick="SetNewStatusOfPeople()">设置培训人员状态-->
<!--                        </button>-->
<!--                    </div>-->
                    <div class="layui-card-body ">
                        <table class="layui-table layui-form" id="training-table" lay-filter="training">
                        </table>
                        <script type="text/html" id="operation-bar">
                            <button class="layui-btn layui-btn-xs  layui-btn-warm" lay-event="detail">
                                <i class="layui-icon">&#xe62d;</i>查看
                            </button>
                        </script>
                        <script type="text/html" id="setStatus-bar">
                            <button class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="status">
                               设置培训状态
                            </button>
                        </script>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

</body>

<script th:inline="NONE">
    var checkedMember = [];
    var wth = $(document).width();

    layui.use(['laydate', 'form', 'table'],
        function () {
            var laydate = layui.laydate;
            var table = layui.table;


            //执行一个laydate实例
            laydate.render({
                elem: '#start' //指定元素
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#end' //指定元素
            });

            // 获取培训批次
            $.ajax({
                url: "/v1/training/getAllTrainingBatch",
                type: "get",
                dataType: "json",
                data: {},
                success: function (data) {
                    // console.log(data)
                    var Arr = data.data;
                    // layui.use('table',
                    //     function () {
                    //         var table = layui.table;
                    //         table.render({
                    //             elem: "#training-table"
                    //             , url: "/v1/training/trainingBatchRecordTrainingBatchIdByProcess?process=0&trainingBatchId="+Arr[0].id
                    //             , cols: [[
                    //                 {checkbox: true, fixed: true}
                    //                 , {field: 'name', title: '姓名', sort: true}
                    //                 , {field: 'gender', title: '性别', sort: true}
                    //                 , {field: 'idCardNum', title: '身份证'}
                    //                 , {field: 'educationalLevel', title: '文化程度', sort: true}
                    //                 , {field: 'nation', title: '民族'}
                    //                 , {field: '', title: '操作', toolbar: "#operation-bar"}
                    //                 , {field: '', title: '人员状态', toolbar:"#setStatus-bar"}
                    //             ]]
                    //             , id: 'testReload'
                    //             , page: true
                    //             , height: 600
                    //             , done: function (res, curr, count) {
                    //                 // console.log(res.data)
                    //                 table_data = res.data;
                    //             }
                    //         });
                    //     })
                    var HtmlStr = '';
                    for (var i = 0; i < Arr.length; i++) {
                        HtmlStr += '<li class="layui-nav-item"  >' +
                            '<a href="javascript:;" onclick="batchTableRender(\'' + Arr[i].id + '\');">' +
                            '<i class="layui-icon layui-icon-file">' +
                            '</i>' + Arr[i].batchName + '</a>' +
                            '</li>'
                    }
                    var batch_list = $("#batch_list");
                    batch_list.html(HtmlStr);
                }
            });


        });

    /*用户-删除*/
    function member_del(obj, id) {
        layer.confirm('确认要删除吗？',
            function (index) {
                //发异步删除数据
                $(obj).parents("tr").remove();
                layer.msg('已删除!', {
                    icon: 1,
                    time: 1000
                });
            });
    }

    // 删除
    function delAll(argument) {

        var data = tableCheck.getData();

        layer.confirm('确认要删除吗？' + data,
            function (index) {
                //捉到所有被选中的，发异步进行删除
                layer.msg('删除成功', {
                    icon: 1
                });
                $(".layui-form-checked").not('.header').parents('tr').remove();
            });
    }


    // 点击左侧的列表进行切换
    function batchTableRender(id) {
        layui.use(['laydate', 'form', 'table'],
            function () {
                var table = layui.table;
                table.render({
                    elem: "#training-table"
                    , url: "/v1/training/trainingBatchRecordTrainingBatchIdByProcess?process=0&trainingBatchId=" + id
                    , cols: [[
                        {checkbox: true, fixed: true}
                        , {field: 'name', title: '姓名', sort: true}
                        , {field: 'gender', title: '性别', sort: true}
                        , {field: 'idCardNum', title: '身份证'}
                        , {field: 'educationalLevel', title: '文化程度', sort: true}
                        , {field: 'nation', title: '民族'}
                        , {field: '', title: '操作', toolbar: "#operation-bar"}
                        , {field: '', title: '人员状态', toolbar:"#setStatus-bar",width:wth*15/100}
                    ]]
                    , id: 'testReload'
                    , page: true
                    , height: 600
                    , done: function (res, curr, count) {
                        for (var i = 0; i < res.data.length ; i++){
                            res.data[i]["userTrainingRecordId"]=res.otherData[i].id;
                            res.data[i]["trainingProcess"]=res.otherData[i].trainingProcess;
                        }
                        table_data = res.data;
                    }
                });


                // 显示窗口
                function showWindow(path, title) {
                    layer.open({
                        type: 2,
                        content: path,
                        title: title,
                        area: ["1080px", $(window).height() + 'px'],
                        offset: '0px',
                        success: function (layero, index) {
                            layer.iframeAuto(index)
                        }
                    })
                }

                // 显示窗口
                function showWindowofstatus(path, title) {
                    layer.open({
                        type: 2,
                        content: path,
                        title: title,
                        area: ["600px","400px"],
                        offset: '76px',
                        success: function (layero, index) {
                            layer.iframeAuto(index)
                        }
                    })
                }

                //工具条
                table.on('tool(training)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'detail') {
                        showWindow('check.html?id='+ data.id, '查看')
                    }if (obj.event === 'status'){
                        showWindowofstatus('trining-set-status.html?id='+ data.userTrainingRecordId +'&trainingProcess='+ data.trainingProcess, '设置培训状态')
                    }
                });


                //表格复选框选择
                table.on('checkbox(training)', function (obj) {
                    if (obj.checked == true) {
                        if (obj.type === 'one') {
                            // console.log(obj.data);
                            checkedMember.push(obj.data.id);
                        } else {
                            for (var item of table_data) {
                                checkedMember.push(item.id);
                            }
                        }
                    } else {
                        if (obj.type === 'one') {
                            for (var i = 0; i < checkedMember.length; i++) {
                                if (checkedMember[i] === obj.data.id) {
                                    checkedMember.splice(i, 1);
                                }
                            }
                        } else {
                            for (var i = 0; i < checkedMember.length; i++) {
                                for (var j = 0; j < table_data.length; j++) {
                                    if (checkedMember[i] === table_data[j].id) {
                                        checkedMember.splice(i, 1);
                                    }
                                }
                            }
                        }
                    }
                    // console.log(checkedMember);
                });
            })
    }

</script>
</html>